<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-3.4.0.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/bootstrap.js"></script>


</head>


<body>
    <!-- header -->
    <div class="header">
        <div class="header-left">
            <span>&#xe653;</span>
            <h2>后台首页</h2>
        </div>


        <div class="logoin">
            <!-- <a href="#"> <img src="./img/avatar.jpg" alt=""></a> -->




            <span>
                <a href="#">笔下光年</a>
            </span>
            <div class="login-d">
                <ul>
                    <li>
                        <a href="#">个人信息</a>
                    </li>
                    <li>
                        <a href="#">修改密码</a>
                    </li>
                    <li>
                        <a href="#">清空缓存</a>
                    </li>
                    <li class="line"></li>
                    <li>
                        <a href="#">退出登录</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- sldebar -->
    <div class="sldebar">
        <div class="logo">
            <a href="#">
                <img src="./img/logo-sidebar.png" alt="">
            </a>
        </div>
        <div class="list">
            <ul class="ul1">
                <li><a href="#">后台首页</a></li>
                <li>
                    <a href="#">UI元素 </a>
                    <ul class="ul2">
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">表单 </a>

                    <ul class="ul2">
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">示例页面 </a>

                    <ul class="ul2">
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">JS插件 </a>

                    <ul class="ul2">
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">多级菜单 </a>

                    <ul class="ul2">
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                        <li><a href="#">按钮</a></li>
                    </ul>
                </li>


            </ul>
        </div>
        <div class="foot">
            <p> Copyright © 2019. <a href="#">IT书包</a> All rights reserved. </p>
        </div>
    </div>
    <!-- content -->
    <div class="content">
        <div class="content-w">
            <div class="row o-r">
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="card">
                        <div class="date">
                            <p>今日收入</p>
                            <h2>102,125.00</h2>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="card card1">
                        <div class="date">
                            <p>今日收入</p>
                            <h2>102,125.00</h2>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="card card2">
                        <div class="date">
                            <p>今日收入</p>
                            <h2>102,125.00</h2>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="card card3">
                        <div class="date">
                            <p>今日收入</p>
                            <h2>102,125.00</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row t-r">
                <div class="col-lg-6 col-xs-12 onbottom">
                    <div class="box1">
                        <div class="tlite1">
                            <h2>每周用户</h2>
                        </div>
                        <div class="text1">
                            <div id="main"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-xs-12 onbottom">
                    <div class="box1">
                        <div class="tlite1">
                            <h2>交易历史记录</h2>
                        </div>
                        <div class="text1">
                            <div id="one"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row th-r">
                <div class="col-xs-12 tat">
                    <div class="box-t">
                        <div class="tt">
                            <h2>项目信息</h2>
                        </div>
                        <div class="tab-body">
                            <table class="table table-striped">
                                <tr class="tr1">
                                    <th>#</th>
                                    <th>项目名称</th>
                                    <th>开始日期</th>
                                    <th>截止日期</th>
                                    <th>状态</th>
                                    <th>进度</th>
                                </tr>

                                <tr>
                                    <td>#</td>
                                    <td>项目名称</td>
                                    <td>开始日期</td>
                                    <td>截止日期</td>
                                    <td>状态</td>
                                    <td>进度</td>
                                </tr>

                                <tr>
                                    <td>#</td>
                                    <td>项目名称</td>
                                    <td>开始日期</td>
                                    <td>截止日期</td>
                                    <td>状态</td>
                                    <td>进度</td>
                                </tr>

                                <tr>
                                    <td>#</td>
                                    <td>项目名称</td>
                                    <td>开始日期</td>
                                    <td>截止日期</td>
                                    <td>状态</td>
                                    <td>进度</td>
                                </tr>
                                <tr>
                                    <td>#</td>
                                    <td>项目名称</td>
                                    <td>开始日期</td>
                                    <td>截止日期</td>
                                    <td>状态</td>
                                    <td>进度</td>
                                </tr>
                                <tr>
                                    <td>#</td>
                                    <td>项目名称</td>
                                    <td>开始日期</td>
                                    <td>截止日期</td>
                                    <td>状态</td>
                                    <td>进度</td>
                                </tr>
                                <tr>
                                    <td>#</td>
                                    <td>项目名称</td>
                                    <td>开始日期</td>
                                    <td>截止日期</td>
                                    <td>状态</td>
                                    <td>进度</td>
                                </tr>
                                <tr>
                                    <td>#</td>
                                    <td>项目名称</td>
                                    <td>开始日期</td>
                                    <td>截止日期</td>
                                    <td>状态</td>
                                    <td>进度</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        $(function() {
            $('.ul1>li>a').click(function() {
                $(this).siblings('.ul2').slideToggle(200)
                $(this).parent('li').siblings('li').children('.ul2').slideUp()
            })
            $('.header-left span').click(function() {
                $('.sldebar').toggleClass('ss')
                $('.header-left').toggleClass('sf')
                $('.content').toggleClass('sd')

            })

            $('.logoin>span>a').click(function() {
                $('.login-d').slideToggle()
            })

            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            var myChart1 = echarts.init(document.getElementById('one'));
            var option1 = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);
            // window.onresize = myChart1.resize;
            // window.onresize = myChart.resize;
            window.onresize = function() {
                myChart1.resize();
                myChart.resize();
            }


        })
    </script>
</body>

</html>